import { Avatar, Drawer, Dropdown, Menu } from 'antd'
import { useState } from 'react'
import SettingForm from './settingForm'
import { UserOutlined } from '@ant-design/icons'
import { ItemType } from 'antd/lib/menu/hooks/useItems'

// 头像
export default function UserInfo() {
    // 抽屉
    const useDrawer = () => {
        const [visible, setVisible] = useState(false)

        const showDrawer = () => {
            setVisible(true)
        }

        const hideDrawer = () => {
            setVisible(false)
        }

        return {
            visible,
            showDrawer,
            hideDrawer,
        }
    }

    // 下拉菜单
    const itemList: ItemType[] = [
        {
            label: '系统设置',
            key: '0',
            onClick: () => showDrawer()
        },
        {
            label: '修改密码',
            key: '1',
        },
        {
            label: '退出登录',
            key: '2',
        },
    ]
    const { visible, showDrawer, hideDrawer } = useDrawer()

    return (
        <>
            <Dropdown menu={{items: itemList}} trigger={['click']}>
                <Avatar icon={<UserOutlined />} />
            </Dropdown>
            <Drawer title="系统设置" placement="right" onClose={hideDrawer} open={visible}>
                <SettingForm></SettingForm>
            </Drawer>
        </>
    )
}
